<i18n locale="zh-CN" lang="yaml">
Code Editor setting: 代码编辑器设置

Setting of Code Editor only effect current browser: 代码编辑器配置仅保存在当前浏览器，更换浏览器或电脑后需要重新配置
Theme                                             : 主题
Font Size                                         : 文字大小
Line Height                                       : 行高
Reset to default                                  : 恢复默认设置
Please input font size                            : 请输入文字大小
Font size should be a integer between 12 and 36   : 文字大小设置范围为 12-36 px
Please input line height                          : 请输入行高
Line height should be a number between 1 and 2    : 行高设置范围为 1-2 倍
</i18n>

<!-- Generated by OpenCC START -->
<i18n locale="zh-HK" lang="yaml">
Code Editor setting: 代碼編輯器設置
Font Size: 文字大小
Font size should be a integer between 12 and 36: 文字大小設置範圍為 12-36 px
Line Height: 行高
Line height should be a number between 1 and 2: 行高設置範圍為 1-2 倍
Please input font size: 請輸入文字大小
Please input line height: 請輸入行高
Reset to default: 恢復默認設置
Setting of Code Editor only effect current browser: 代碼編輯器配置僅保存在當前瀏覽器，更換瀏覽器或電腦後需要重新配置
Theme: 主題
</i18n>
<i18n locale="zh-TW" lang="yaml">
Code Editor setting: 程式碼編輯器設定
Font Size: 文字大小
Font size should be a integer between 12 and 36: 文字大小設定範圍為 12-36 px
Line Height: 行高
Line height should be a number between 1 and 2: 行高設定範圍為 1-2 倍
Please input font size: 請輸入文字大小
Please input line height: 請輸入行高
Reset to default: 恢復預設設定
Setting of Code Editor only effect current browser: 程式碼編輯器配置僅儲存在當前瀏覽器，更換瀏覽器或電腦後需要重新配置
Theme: 主題
</i18n>
<!-- Generated by OpenCC END -->

<template>
  <el-drawer
    :modal="false"
    :visible.sync="show"
    direction="rtl">
    <div slot="title">
      <i class="fa fa-fw fa-cog"></i> {{ $t('Code Editor setting') }}
    </div>
    <div class="code-editor-setting">
      <InfoBlock type="warning" :title="$t('Setting of Code Editor only effect current browser')" />
      <br>
      <el-form ref="form" label-width="100px" :model="form" :rules="formRules">
        <el-form-item :label="$t('Theme')">
          <el-select v-model="form.theme">
            <el-option v-for="t in C.CODE_MIRROR_THEME" :key="t.key" :label="$t(t.name)" :value="t.key"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('Font Size')" prop="style.fontSize">
          <el-slider
            :min="12"
            :max="36"
            :step="1"
            :show-input="true"
            :show-input-controls="false"
            :show-tooltip="false"
            v-model.number="form.style.fontSize"></el-slider>
        </el-form-item>

        <el-form-item :label="$t('Line Height')" prop="style.lineHeight">
          <el-slider
            :min="1"
            :max="2"
            :step="0.1"
            :show-input="true"
            :show-input-controls="false"
            :show-tooltip="false"
            v-model.number="form.style.lineHeight"></el-slider>
        </el-form-item>

        <el-form-item>
          <div class="float-right">
            <el-button @click="resetDefault">{{ $t('Reset to default') }}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'CodeEditorSetting',
  components: {
  },
  watch: {
    form: {
      deep: true,
      handler(to, from) {
        let _formData = this.T.jsonCopy(this.form);
        this.$store.commit('updateCodeMirrorSettings', _formData);

        setImmediate(() => {
          if (this.codeMirror) {
            this.codeMirror.refresh();
          }
        })
      }
    },
  },
  methods: {
    open() {
      this.show = true;
    },
    resetDefault() {
      this.form = this.T.jsonCopy({
        theme: this.C.CODE_MIRROR_THEME_DEFAULT.key,
        style: this.$store.getters.DEFAULT_STATE.codeMirrorStyle,
      });
    },
  },
  props: {
    codeMirror: Object,
  },
  data() {
    let _formData = this.T.jsonCopy({
      theme: this.$store.getters.codeMirrorSettings.theme,
      style: {
        fontSize  : parseInt(this.$store.getters.codeMirrorSettings.style.fontSize),
        lineHeight: this.$store.getters.codeMirrorSettings.style.lineHeight,
      }
    });

    return {
      show: false,

      form: _formData,
      formRules: {
        'style.fontSize': [
          {
            trigger : 'change',
            message : this.$t('Please input font size'),
            required: true,
          },
          {
            trigger: 'change',
            message: this.$t('Font size should be a integer between 12 and 36'),
            type   : 'integer', min: 12, max: 36,
          },
        ],
        'style.lineHeight': [
          {
            trigger : 'change',
            message : this.$t('Please input line height'),
            required: true,
          },
          {
            trigger: 'change',
            message: this.$t('Line height should be a number between 1 and 2'),
            type   : 'number', min: 1, max: 2,
          },
        ],
      }
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.code-editor-setting {
  padding: 10px 30px;
}
</style>
<style>
.code-editor-setting .el-slider__input {
  width: 60px;
}
.code-editor-setting .el-slider__runway.show-input {
  margin-right: 80px;
  width: auto;
}
</style>
